import React from 'react'
// ===================================================================== Temp
import { Tree  } from 'antd'
// ===================================================================== global declare
const { $http, $Lazy } = window
const Modal 		= $Lazy.state(()=>import('@antd/modal'))
const message 		= $Lazy.file(()=>import('@antd/message'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		treeData: [],
		selectedKeys:[]
	}
	pid = ''
	open = (uuid)=> {
		this.uuid = uuid
		this.modal.open()
		$http.submit(this,'menu/treemenu', {param:{role_id:uuid}, loadingText:'数据加载中'}).then((data)=>{
			this.setState({treeData: data.items, selectedKeys: data.haspermlist })
		})
	}
	onCheck = (checkedKeys, info) => {
		this.setState({ selectedKeys: checkedKeys })
		this.pid = info.halfCheckedKeys
	}
	okSubmit = () => {
		const { selectedKeys } = this.state
		$http.submit(this,'menu/addpermisson', {param:{role_id:this.uuid,perm_id:[...selectedKeys, ...this.pid]}}).then((data)=>{
			message.then(f=>f.success(`操作成功`))
		})
		this.modal.close()
		this.setState({ selectedKeys: [] })
	}
	
	render(){
		const { treeData, selectedKeys } = this.state
		return (
			<>
				<Modal
					width 			= { 550 }
					height			= { '70%' }
					onRef			= { ref => this.modal = ref }
					title			= { '权限树' }
					isFullScroll	= { true }
					onOk			= { this.okSubmit }
				>
					<Tree
						treeData 		= { treeData } 
						checkable
						showLine
						checkedKeys 	= { selectedKeys }
						onCheck			= { this.onCheck }
					/>
				 </Modal>
			</>
		)
	}
}

export default Index